<template>
	<view class="app-navigation-bar safe-area-inset-bottom" :style="{backgroundColor: bottom_background_color}"
		:class="{'app-tab-bar-shadow': shadow}">
		<view v-for="(item, index) in tabBarLoacl" :key="index" class="app-tab-bar-item box-grow-1"
			:style="{height: botNavHei + 'rpx',backgroundColor: bottom_background_color, width: `${100/tabBarLoacl.length}%`}">
			<!-- 不可重复点击刷新 -->
			<app-jump-button :backgroundColor="bottom_background_color" form class="app-button"
				:url="router === item.url ? '/' : item.url" :open_type="item.open_type" :params="item.param"
				arrangement="column">
				<image class="app-icon" :src=" router === item.url ? item.active_icon : item.icon"></image>
				<view class="app-nav-text"
					v-bind:style="{'color': router === item.url ? item.active_color : item.color}"
					v-if="item.text.indexOf(' ') != -1">
					<text>
						<!-- {{item.text.substring(0,4)}} -->
						{{item.text.split(' ')[0]}}
					</text>
					<text>
						<!-- {{item.text.slice(-4)}} -->
						{{item.text.split(' ')[1]}}
					</text>
				</view>
				<view class="app-nav-text"
					v-bind:style="{'color': router === item.url ? item.active_color : item.color}" v-else>
					{{item.text}}
				</view>
			</app-jump-button>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				router: ''
			}
		},
		props: {
			pageCount: Number,
		},
		computed: {
			/* ...mapGetters('mallConfig', {
				tabBarNavs: 'getNavBar'
			}), */
			...mapGetters('iPhoneX', {
				botNavHei: 'getNavHei',
			}),
			...mapState('mallConfig', {
				bottom_background_color: state => state.navbar.bottom_background_color,
				shadow: state => state.navbar.shadow,
				tabBarLoacl: state => state.tabBarLoacl
			}),
		},
		created() {
			this.router = this.$platDiff.tabBarUrl(null, this.pageCount);
		}
	};
</script>

<style lang="scss" scoped>
	.app-navigation-bar {
		display: flex;
		flex-direction: row;
		width: 100%;
		bottom: 0;
		left: 0;
		background-color: white;
		z-index: 1600;
		position: fixed;
	}

	.app-nav-text {
		font-size: #{22rpx};
		font-weight: 700;
		line-height: #{22rpx};
		// margin-top: #{75rpx};
		margin-top: #{56rpx};
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.app-icon {
		/* width: #{50rpx};
		height: #{50rpx};
		margin-top: #{20rpx}; */
		width: #{50rpx};
		height: #{50rpx};
		margin-top: 12rpx;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.app-tab-bar-item {
		flex-grow: 1;
		position: relative;
	}

	.app-tab-bar-shadow {
		border-top: 1rpx solid $uni-weak-color-one;
	}
</style>
